<template>
  <div class="ReviewReference">
    <div class="head">
      <div class="card">
        <h3>
          <span class="point"></span>
          平均分
        </h3>
        <h1>
          <i class="iconfont">&#xe6d0;</i>
          4.5
        </h1>
      </div>
      <!-- <div class="card">
        <h3>
          <span class="point"></span>
          有效在线天数
        </h3>
        <h1>
          <i class="iconfont">&#xe7a2;</i>
          82000
        </h1>
      </div> -->
    </div>
    <div class="searchBox">
      <el-radio-group v-model="dayType" size="small" fill="#7b94d8">
        <el-radio-button label="1">今日</el-radio-button>
        <el-radio-button label="2">昨日</el-radio-button>
        <el-radio-button label="3">近7日</el-radio-button>
      </el-radio-group>
      <div class="right">
        <el-date-picker
          size="small"
          v-model="timeArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="timeOptions"
          value-format="yyyy-MM-dd"
          @change="focusA"
        >
        </el-date-picker>
        <el-button style="margin-left: 10px" size="small" @click="senior">
          {{ "高级筛选：" + checked }}
        </el-button>
        <el-button
          style="margin-left: 10px"
          class="btn"
          icon="el-icon-search"
          size="small"
          @click="search"
          >查询搜索</el-button
        >
        <el-button icon="el-icon-paperclip" @click="exportExcel" size="small"
          >导出EXCEL</el-button
        >
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#f5f7fa' }"
      :show-summary="showSummary"
    >
      <template slot="empty">
        <el-empty :image-size="200"></el-empty>
      </template>
      <el-table-column prop="date" label="日期"> </el-table-column>
      <el-table-column prop="online_duration" label="在线时长">
      </el-table-column>
      <el-table-column prop="peak_online_duration" label="高峰在线时长">
      </el-table-column>
      <el-table-column prop="matching_duration" label="匹配时长">
      </el-table-column>
      <el-table-column prop="valid_call_time" label="有效通话时长">
      </el-table-column>
      <el-table-column prop="received_voice_num" label="收到语音请求">
      </el-table-column>
      <el-table-column prop="answer_voice_num" label="接听语音请求">
      </el-table-column>
      <el-table-column prop="trends_num" label="发布动态数"> </el-table-column>
      <el-table-column prop="vaild_call_num" label="有效通话人数">
      </el-table-column>
      <el-table-column prop="diamond_income" label="宝石收益">
      </el-table-column>
    </el-table>
    <br />
    <pagination
      :total="total"
      :page.sync="page"
      :limit.sync="pageSize"
      @pagination="getList"
    />
    <el-dialog
      title="筛选条件"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form label-width="150px" :model="form">
        <el-form-item label="在线时长大于">
          <el-input
            style="width: 90%"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            v-model="form.online_duration"
          ></el-input>
          H
        </el-form-item>
        <el-form-item label="匹配时长大于">
          <el-input
            style="width: 90%"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            v-model="form.matching_duration"
          ></el-input>
          H
        </el-form-item>
        <el-form-item label="有效通话时长大于">
          <el-input
            style="width: 90%"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            v-model="form.valid_call_time"
          ></el-input>
          H
        </el-form-item>
        <el-form-item label="发布动态大于">
          <el-input
            style="width: 90%"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            v-model="form.trends_num"
          ></el-input>
          条
        </el-form-item>
        <el-form-item label="宝石收益大于">
          <el-input
            style="width: 90%"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            v-model="form.diamond_income"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="reset">重 置</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { userVerifyReference } from "@/api/UserManagement";
export default {
  components: { Pagination },
  props: ["userId"],
  data() {
    return {
      dayType: "3",
      timeArr: [],
      startDate: "",
      endDate: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      addLoading: false,
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      //高级筛选
      dialogVisible: false,
      form: {
        online_duration: "",
        matching_duration: "",
        valid_call_time: "",
        trends_num: "",
        diamond_income: "",
      },
    };
  },
  methods: {
    focusA(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
    //高级筛选
    senior() {
      this.dialogVisible = true;
    },
    reset() {
      this.form = {
        online_duration: "",
        matching_duration: "",
        valid_call_time: "",
        trends_num: "",
        diamond_income: "",
      };
    },
    search() {
      this.page = 1;
      this.getList();
    },
    async getList() {
      if (this.userId) {
        const res = await userVerifyReference({
          user_id: this.userId,
          page: this.page,
          pageSize: this.pageSize,
          startTime: this.startDate,
          endTime: this.endDate,
          diamond_income: this.form.diamond_income,
          trends_num: this.form.trends_num,
          valid_call_time: this.form.valid_call_time,
          matching_duration: this.form.matching_duration,
          online_duration: this.form.online_duration,
        });
        if (res.code == 0) {
          this.total = parseInt(res.data.count);
          this.tableData = res.data.list;
          res.data.total.date = "总计";
          this.tableData.push(res.data.total);
        }
      }
    },
    //导出
    async exportExcel() {
      if (this.userId) {
        const res = await userVerifyReference({
          user_id: this.userId,
          page: 1,
          pageSize: 1000,
          startTime: this.startDate,
          endTime: this.endDate,
          diamond_income: this.form.diamond_income,
          trends_num: this.form.trends_num,
          valid_call_time: this.form.valid_call_time,
          matching_duration: this.form.matching_duration,
          online_duration: this.form.online_duration,
        });
        if (res.code == 0) {
          let list = [];
          list = res.data.list;
          res.data.total.date = "总计";
          list.push(res.data.total);
          let head = [
            "日期",
            "在线时长",
            "高峰在线时长",
            "匹配时长",
            "有效通话时长",
            "收到语音请求",
            "接听语音请求",
            "发布动态数",
            "有效通话人数",
            "宝石收益",
          ];
          let filter = [
            "date",
            "online_duration",
            "peak_online_duration",
            "matching_duration",
            "valid_call_time",
            "received_voice_num",
            "answer_voice_num",
            "trends_num",
            "vaild_call_num",
            "diamond_income",
          ];
          this.$excel(list, head, filter, "用户：" + this.userId + "审核参考");
        }
      }
    },
  },
  //   created(){

  //   },
  watch: {
    type: {
      handler(newName, oldName) {
        if (this.type == 4 || this.type == 5) {
          this.dayType = "3";
        }
      },
      immediate: true,
    },
    dayType: {
      handler(newName, oldName) {
        if (newName == 1) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          this.timeArr = [time, time];
          this.startDate = time;
          this.endDate = time;
        } else if (newName == 2) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          var newtimems = new Date().getTime() - 24 * 60 * 60 * 1000;
          var myDate1 = new Date(newtimems);
          var time1 = myDate1.toLocaleDateString().split("/").join("-");
          this.timeArr = [time1, time];
          this.startDate = time1;
          this.endDate = time;
        } else if (newName == 3) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          var newtimems = new Date().getTime() - 24 * 60 * 60 * 1000 * 6;
          var myDate1 = new Date(newtimems);
          var time1 = myDate1.toLocaleDateString().split("/").join("-");
          this.timeArr = [time1, time];
          this.startDate = time1;
          this.endDate = time;
        }
      },
      immediate: true,
    },
  },
  computed: {
    checked() {
      var arr = Object.values(this.form).filter(function (item) {
        if (item) {
          return true; //过滤掉为空的项
        }
      });
      if (arr.length === 0) {
        // 如果过滤后的arr长度为0，表示对象的键值对的值都为空！
        return "未选择";
      } else {
        return "已选择";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.ReviewReference {
  .head {
    display: flex;
  }
  .card {
    height: 120px;
    border: 2px solid #ebeff8;
    border-radius: 5px;
    width: 300px;
    margin-top: 20px;
    margin-right: 20px;
    h3 {
      display: flex;
      align-items: center;
      padding-left: 10px;
      .point {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 5px solid #7b94d8;
        margin-right: 10px;
      }
    }
    h1 {
      margin: 0px 0;
      text-align: right;
      padding-right: 20px;
      i {
        color: #7b94d8;
      }
    }
  }
  .searchBox {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
}
</style>